<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1, user-scalable=no">
    <meta http-equiv="X-UA-Compatible" content="ie=edge,chrome=1">
    <meta name="author" content="姜启航">
    <title></title>
    <style>
     *{
         box-sizing: border-box;
     }
     a{
         display: inline-block;
         width: 19px;
         height: 19px;
         background-image: url("./img/star.png")
     }
     .box{
         display: flex;
     }
     .box>div{
         margin-left: 10px;
         position: relative;
     }
    .box>div:hover .pingjia{
        display: block;
    }
     a.active{
         background-position: 0 -28px;
     }
     .pingjia{
         border: 1px solid orange;
         font-size: 12px;
         position: absolute;
         left: 0;
         top:20px;
         width: 120px;
         /* text-align: center; */
          display: none; 
     }
     
    </style>
</head>
<body>
     <div class="box">
    <span>宝贝与描述相符</span>
    <div>
        <a href="javascript:;"></a>
        <a href="javascript:;"></a>
        <a href="javascript:;"></a>
        <a href="javascript:;"></a>
        <a href="javascript:;"></a>
        <div class="pingjia">五星好评</div>
    </div>
    <span class="result"></span>
    </div>
<script src="../jquery.js"></script>
</body>
</html>

<script>

    var msg = [
        "很不满意|差得太离谱，与卖家描述的严重不符，非常不满",
        "不满意|部分有破损，与卖家描述的不符，不满意",
        "一般|质量一般，没有卖家描述的那么好",
        "满意|质量不错，与卖家描述的基本一致，还是挺满意的",
        "非常满意|质量非常好，与卖家描述的完全一致，非常满意"
    ];


    // 展示星星
    function showSatr(count){
        $('a').each(function(){
            if (($(this).index())<count) {
                $(this).addClass('active');
            } else {
                 $(this).removeClass('active');
            }
        })
    }
    // 记录分数
    var score=0;

     $('a').each(function(){
         $(this).mouseover(function(){
             showSatr(($(this).index())+1);
             $('.pingjia').show().css('left',$(this).position().left);
             var amsg=msg[$(this).index()];
             $('.pingjia').html('<strong style="color:red;">'+(($(this).index())+1)+'分'+amsg.split('|')[0]+'</strong><br>'+amsg.split('|')[1])
         })
     });
        $('a').click(function(){
            score=($(this).index())+1;
            $('.result').html('<strong style="color:red;">'+score+'分</strong>'+msg[$(this).index()].split('|')[1])
        })
        $('a').mouseout(function(){
            showSatr(score);
        })
    







</script>